@extends('layouts.base')
@section('title', '订单管理')
@section('content')
@section('admin-style')

<!-- import Vue before Element -->
<link rel="stylesheet" href="{{ asset('/sj/css/datepicker.css') }}">
<script src="{{ asset('/sj/js/plugins/moment.min.js') }}"></script>
<script src="{{ asset('/sj/js/datepicker.all.js') }}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>
	<style>
		.wrap{width: 400px; //设置需要固定的宽}
	</style>
@stop

<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
		<div class="col-md-5 align-self-center">
			<h3 class="text-themecolor">订单操作日志</h3>
		</div>
		<div class="col-md-7 align-self-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
				<li class="breadcrumb-item">日志管理</li>
				<li class="breadcrumb-item active">订单日志</li>
			</ol>
		</div>
	</div>
	<!-- ============================================================== -->
	<!-- End Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->

	<!-- ============================================================== -->
	<!-- Start Page Content -->
	<!-- ============================================================== -->
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-body">
					<h6 class="card-subtitle"></h6>
					<div class="card-body" >
						<form method="get" action="{{ route('admin.orderslog.index') }}" >
							<div class="form-row">
								<div class="col-md-3 mb-3">
									<label for="validationDefault04">订单编号</label>
									<input type="text" name="orderSn" class="form-control" value="{{request()->orderSn}}" placeholder="订单编号">
								</div>
								<div class="col-md-3 mb-3">
									<div class="mt40">
										<div>订单时间</div>
										<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
										<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
										<input type="text" autocomplete="off" name="startTime" placeholder="选择开始时间" class=" c-datepicker-data-input only-date" value="{{request()->startTime}}">
										</div>
										<span class="c-datepicker-range-separator">--</span>
										<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
										<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
										<input type="text" autocomplete="off" name="endTime" placeholder="选择结束时间" class=" c-datepicker-data-input only-date" value="{{request()->endTime}}">
									</div>
									</div>
								</div>    
							</div>
							<button class="btn btn-primary" type="submit" style="margin-left: 480px;">筛选</button>
							<a href="{{ route('admin.orderslog.index') }}" class="btn btn-info">重置</a>
						</form>
					</div>
					<div class="table-responsive">
						<table id="demo-foo-addrow" class="table table-bordered m-t-30 table-hover contact-list" data-paging="true" data-paging-size="7">
							<thead>
							<tr>
								<th>ID</th>
								<th>关键字</th>
								<th>数据内容</th>
								<th>订单编号</th>
								<th>创建时间</th>
							</tr>
							</thead>
							<tbody>
							@foreach($orders_logs as $value)
								<tr>
									<td>{{ $value->id }}</td>
									<td>{{ $value->key }}</td>
									<td><div class="wrap">{{ $value->value }}</div></td>
									<td>{{ $value->ordersn }}</td>
									<td>{{ $value->created_at }}</td>
								</tr>
							@endforeach
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
		<div class="col-sm-12 col-md-4"><div class="dataTables_info" id="example_info" role="status" aria-live="polite"></div></div>
		<div class="col-sm-12 col-md-8">
			<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
				{{$orders_logs->appends([
					'orderSn' => request()->orderSn,
					'startTime' => request()->startTime,
					'endTime' => request()->endTime,
					'startTime' => request()->startTime,
				])->links('layouts.pagination')}}
			</div>
		</div>
	</div>
	</div>
</div>

@stop
@section('admin-js')
<script type="text/javascript">
      $(function(){
        var DATAPICKERAPI = {
          // 默认input显示当前月,自己获取后填充
          activeMonthRange: function () {
            return {
              startTime: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
              endTime: moment().set({ 'hour': 11, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          shortcutMonth: function () {
            // 当月
            var nowDay = moment().get('date');
            var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
            var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
            return {
              now: '-' + nowDay + ',0',
              prev: '-' + prevMonthDay + ',-' + nowDay
            }
          },
          // 注意为函数：快捷选项option:只能同一个月份内的
          rangeMonthShortcutOption1: function () {
            var result = DATAPICKERAPI.shortcutMonth();
            return [{
              name: '昨天',
              day: '-1,-1',
              time: '00:00:00,23:59:59'
            }, {
              name: '这一月',
              day: result.now,
              time: '00:00:00,'
            }, {
              name: '上一月',
              day: result.prev,
              time: '00:00:00,23:59:59'
            }];
          },
          // 快捷选项option
          rangeShortcutOption1: [{
            name: '最近一周',
            day: '-7,0'
          }, {
            name: '最近一个月',
            day: '-30,0'
          }, {
            name: '最近三个月',
            day: '-90, 0'
          }],
          singleShortcutOptions1: [{
            name: '今天',
            day: '0'
          }, {
            name: '昨天',
            day: '-1',
            time: '00:00:00'
          }, {
            name: '一周前',
            day: '-7'
          }]
        };
          //十分秒年月日单个
          $('.J-datepicker').datePicker({
            hasShortcut:true,
            min:'2018-01-01 04:00:00',
            max:'2019-04-29 20:59:59',
            shortcutOptions:[{
              name: '今天',
              day: '0'
            }, {
              name: '昨天',
              day: '-1',
              time: '00:00:00'
            }, {
              name: '一周前',
              day: '-7'
            }],
            
          });
          
          //年月日单个
          $('.J-datepicker-day').datePicker({
            hasShortcut: true,
            format:'YYYY-MM-DD',
            shortcutOptions: [{
              name: '今天',
              day: '0'
            }, {
              name: '昨天',
              day: '-1'
            }, {
              name: '一周前',
              day: '-7'
            }]
          });
          
          //年月日范围
          $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
          });

          //十分年月日单个
          $('.J-datepickerTime-single').datePicker({
            format: 'YYYY-MM-DD HH:mm'
          });
          
          //十分年月日范围
          $('.J-datepickerTime-range').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true
          });
          
          //十分秒年月日范围，包含最大最小值
          $('.J-datepicker-range').datePicker({
            hasShortcut: true,
            min: '2018-01-01 06:00:00',
            max: '2019-04-29 20:59:59',
            isRange: true,
            shortcutOptions: [{
              name: '昨天',
              day: '-1,-1',
              time: '00:00:00,23:59:59'
            },{
              name: '最近一周',
              day: '-7,0',
              time:'00:00:00,'
            }, {
              name: '最近一个月',
              day: '-30,0',
              time: '00:00:00,'
            }, {
              name: '最近三个月',
              day: '-90, 0',
              time: '00:00:00,'
            }]
          });
          //十分秒年月日范围，限制只能选择同一月，比如2018-10-01到2018-10-30
          $('.J-datepicker-range-betweenMonth').datePicker({
            isRange: true,
            between:'month',
            hasShortcut: true,
            shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
          });
          
          //十分秒年月日范围，限制开始结束相隔天数小于30天
          $('.J-datepicker-range-between30').datePicker({
            isRange: true,
            between: 30
          });
          
          //年月单个
          $('.J-yearMonthPicker-single').datePicker({
            format: 'YYYY-MM',
            min: '2018-01',
            max: '2019-04'
          });
          
          //选择年
          $('.J-yearPicker-single').datePicker({
            format: 'YYYY',
            min: '2018',
            max: '2020'
          });    
          
      });

</script>

@stop

